<script setup lang="ts">
import { PropType } from "vue";
import { ModuleType } from "@/type";
import Draggable from "vuedraggable";
import XmlNode from "@/components/xmlNode/index.vue";

defineProps({
  list: {
    type: Array as PropType<ModuleType[]>,
    default: () => {
      return [];
    }
  }
});

const emit = defineEmits(["copy-node", "delete-node", "group-node"]);
/**
 * 复制节点
 */
const copyNode = (node: ModuleType) => {
  emit("copy-node", node);
};
/**
 * 删除节点
 */
const deleteNode = (node: ModuleType) => {
  emit("delete-node", node);
};
/**
 * 组合节点
 */
const groupNode = (node: ModuleType) => {
  emit("group-node", node);
};
</script>

<template>
  <draggable
    :list="list"
    handle=".node-move"
    group="moduleList"
    chosen-class="chosen"
    animation="300"
    item-key="id"
    class="w-full h-full min-h-90"
  >
    <template #item="{ element, index }">
      <XmlNode :node="element" :index="index" @copy-node="copyNode" @delete-node="deleteNode" @group-node="groupNode" />
    </template>
  </draggable>
  <div v-if="!list.length" class="workspace-placeholder">
    <i class="fas fa-arrow-left f-s-24 m-b-15"></i>
    <h3>从左侧拖拽组件开始构建XML</h3>
  </div>
</template>
